<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="../common/vue.min.js" type="text/javascript"></script>
    <style type="text/css">

    </style>
</head>
<body>
<!--view-->
<div id="e2">
    <!--一个限制是每个绑定只能包含单个表达式-->
    <div id="example">
        a={{ a }}, b={{ b }}

        <hr/>
        fullname:{{fullname}}
    </div>

</div>


<script type="text/javascript">

    /**
     *
     */
    var vm = new Vue({
        el: '#example',
        data: {
            a: 1,
            b: 2,
            fullname: 'reesechou',
            firstName: 'reese',
            lastName: "chou"
        },
        computed: {
            // 一个计算属性的 getter
            b: function () {
                // `this` 指向 vm 实例
                return this.a + 1
            },
            //computed属性优先于$watch
            fullname: {
                get: function () {
                    return this.firstName + "-" + this.lastName;
                },
                set: function(newVal){
                    //TODO 页面会崩溃
                    //现在在调用 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会有相应更新。
//                    console.log(newVal)
//                    var names = newVal.split(' ');
//                    this.firstName = names[0];
//                    this.lastName = names[names.length - 1];
                }
            }
        }
    })

    vm.a = 2

    vm.$watch('firstName', function (val) {
        this.fullname = val + this.lastName;
    })

    vm.$watch('lastName', function (val) {
        this.fullname = this.firstName + val;
    })

    vm.$data.firstName = "zhou";
    vm.$data.lastName = "jingqing";
    vm.$data.fullname = "zhou jingqing"


</script>

</body>
</html>